<template>
	<view class="main-content">
		<view class="content">
			<view v-show="isShowSwiper === barType">
			<swiper class="swiper" indicator-dots="true" autoplay="true" indicator-active-color="#fff"
					indicator-color="#fff">
				<swiper-item>
					<view class="banImg">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ykv1vkf5qdf020b3c1/4152f8f8-5e6f-46fb-b0cd-4bd390631a34.png" class="image"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="banBox">
				<view class="itemBox">
					<image src="/static/image/zhengping.png" mode="aspectFill" class="img"></image>
					<text class="itemText">正品保障</text>
				</view>
				<view class="itemBox">
					<image src="/static/image/search.png" mode="aspectFill" class="img"></image>
					<text class="itemText">逐件查验</text>
				</view>
				<view class="itemBox">
					<image src="/static/image/user.png" mode="aspectFill" class="img"></image>
					<text class="itemText">多重鉴别</text>
				</view>
			</view>
			<!-- 专区 -->
			<view class="zhuan-qu">
				<view v-for="(item, index) in zhuanList" :key="index" class="ziItem">
					<view class="content-item">
						<image :src="item.imgSrc" mode="aspectFill" class="img1"></image>
						<text class="txt">{{item.imgInfo}}</text>
					</view>
				</view>
				<view class="ziItem" v-if="zhuanList.length !== 0">
					<view class="content-item">
						<image src="~@/static/category/more.png" mode="aspectFit" class="img1"></image>
						<text class="txt">MORE</text>
					</view>
				</view>
			</view>
			<!-- 清洗 -->
			<view class="prorect">
				<van-row class="clearfix projectTitle">
					<text class="big left" >焕然洗护</text>
					<text class="small left">/ 专业清洗 潮人首选</text>
					<text class="right jRight"> > </text>
				</van-row>
				<view class="prorectList">
					<view v-for="(item, index) in prorectList" :key="index" class="ziItem">
						<view class="content-item">
							<image :src="item.imgSrc" mode="aspectFill" class="img1"></image>
							<text class="txt">{{item.imgInfo}}</text>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="main-box">
			<view v-for="(item, index) in mainList" :key="index" class="main-item" @click="toDetail(index)">
				<view class="img-box1">
					<image :src="item.imgSrc" mode="aspectFit" class="main-img"></image>
				</view>
				<view class="txt-box">
					<text>{{item.imgInfo}}</text>
				</view>
				<view class="price-box clearfix">
					<view class="left">
						<text class="doller">￥</text>
						<text>{{item.price}}</text>
					</view>
					<view class="right pay">
						<text>{{item.numPeople}}</text>
						<text>人付款</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhuanList: [],
				prorectList: [],
				mainList: [],
				isShowSwiper: 'search'
			};
		},
		props: {
			barType: {
				type: String,
				required: true,
				default: 'search'
			}
		},
		methods: {
			btnItem(index) {
				this.activeIndex = index
			},
			toDetail(index) {
				let type = this.mainList[index].type
				uni.navigateTo({
					url:"/pages/goodsDetail/goodsDetail?type=" + type
				})
			}
		},
		watch: {
			barType(newName, oldName) {
				uniCloud.callFunction({
					name: "allGoods",
					data: {
						type: 'show',
						contentType: newName
					}
				}).then(res => {
					if(newName == 'search') {
						this.mainList = res.result
					} else {
						this.mainList = res.result.data[0].data
					}
					})
					.catch(err => {
						uni.showModal({
							content: `渲染数据失败：${err.message}`,
							showCancel: false
						})
					})
				}
		},
		created() {
			uni.showLoading({
				title: '处理中...'
			})
			let getCategory = uniCloud.callFunction({
				name: "category",
				data: {
					type: 'get'
				}
			})
			let getWashGoods = uniCloud.callFunction({
				name: "washGoods",
				data: {
					type: 'get'
				}
			})
			let getAllGoods = uniCloud.callFunction({
				name: "allGoods",
				data: {
					type: 'show',
					contentType: this.barType
				}
			})
			Promise.all([getCategory, getWashGoods, getAllGoods]).then(res => {
				uni.hideLoading()
				this.zhuanList = res[0].result.data.data
				this.prorectList = res[1].result.data.data
				this.mainList = res[2].result
			}).catch(err => {
				uni.hideLoading()
				uni.showModal({
					content: `渲染数据失败：${err.message}`,
					showCancel: false
				})
				console.error(err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.main-content {
		overflow: hidden;
		.content {
			margin-top: 180rpx;
		}
		.swiper {
			width: 750rpx;
			height: 270rpx;
			background-color: #40a1a8;
			.banImg {
				width: 750rpx;
				height: 250rpx;
				text-align: center;
				line-height: 250rpx;
				.image {
					width: 650rpx;
					height: 200rpx;
					vertical-align: middle;
				}
			}
		}
		
		.banBox {
			display: flex;
			width: 750rpx;
			height: 50rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid $uni-color-gray;
			.itemBox {
				flex: 1;
				text-align: center;
				.itemText {
					margin-left: 12rpx;
					letter-spacing: 5rpx;
				}
			}
			.img {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}
		.zhuan-qu {
			display: flex;
			flex-wrap: wrap;
			width: $uni-width;
			padding: 20rpx 0;
			border-bottom: 2rpx solid $uni-color-gray;
		}
		.ziItem {
			margin-top: 10rpx;
			width: $uni-width/4;
			.content-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.img1 {
					width: 100rpx;
					height: 100rpx;
				}
				.txt {
					font-size: $uni-font-size-sm;
					margin-top: 10rpx;
				}
			}
		}
		.prorect {
			box-sizing: border-box;
			width: $uni-width;
			padding-top: 20rpx;
			.big {
				font-size: 40rpx;
				font-weight: 700;
				padding-left: 20rpx;
			}
			.small {
				font-size: $uni-font-size-sm;
				color: #c2c2c2;
				margin-top: 5rpx;
				margin-left: 5rpx;
			}
			.jRight {
				margin-right: 20rpx;
				color: #c2c2c2;
				font-size: 30rpx;
			}
			.prorectList {
				display: flex;
				width: $uni-width;
				padding: 20rpx 0;
			}
		}
		.line {
			width: $uni-width;
			height: 16rpx;
			background-color: #f5f5f9;
		}
		// 主要内容
		.main-box {
			display: flex;
			flex-wrap: wrap;
			padding: 0;
			.main-item {
				box-sizing: border-box;
				width: $uni-width/2;
				padding: 10rpx;
				border: 1rpx solid $uni-color-gray;
				
			}
			// 图片盒子
			.img-box1 {
				width: 375rpx;
				height: 270rpx;
				text-align: center;
				.main-img {
					vertical-align: middle;
					width: 300rpx;
					height: 250rpx;
					vertical-align: middle;
				}
			}
			// 文字内容
			.txt-box {
				width: 375rpx;
				box-sizing: border-box;
				font-size: $uni-font-size-base;
				padding: 0 30rpx 0 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			// 价格和人数
			.price-box {
				width: 375rpx;
				font-size: $uni-font-size-base;
				box-sizing: border-box;
				padding: 10rpx 30rpx 20rpx 20rpx;
				.doller {
					font-size: $uni-font-size-sm;
				}
				.pay {
					font-size: $uni-font-size-sm;
					color: #ababab;
				}
			}
		}
	}

</style>
